import React from 'react';
import Link from 'umi/link';
import PageHeader from '@/components/PageHeader';
import { connect } from 'dva';
import { Button, Spin, Card } from 'antd';
import GridContent from './GridContent';
import styles from './index.less';
import MenuContext from '@/layouts/MenuContext';

const PageHeaderWrapper = ({
  children,
  contentWidth,
  wrapperClassName,
  top,
  loading,
  action,
  to,
  withCard,
  ...restProps
}) => (
  <div className={wrapperClassName}>
    {top}
    <MenuContext.Consumer>
      {value => (
        <PageHeader
          wide={contentWidth === 'Fixed'}
          {...value}
          key="pageheader"
          {...restProps}
          action={
            action ||
            (to ? (
              <Link to={to}>
                <Button>返回</Button>
              </Link>
            ) : null)
          }
          loading={loading}
          linkElement={Link}
          // itemRender={item => {
          //   if (item.locale) {
          //     return <FormattedMessage id={item.locale} defaultMessage={item.title} />;
          //   }
          //   return item.title;
          // }}
        />
      )}
    </MenuContext.Consumer>
    {children ? (
      <Spin spinning={loading || false} className={styles.fixSpin} size="large">
        <div className={styles.content}>
          <GridContent>{withCard ? <Card>{children}</Card> : children}</GridContent>
        </div>
      </Spin>
    ) : null}
  </div>
);

export default connect(({ setting }) => ({
  contentWidth: setting.contentWidth,
}))(PageHeaderWrapper);
